<template>
	<view class="container">
		<uni-list :border="true">
			<uni-list-item title="房间:" :rightText="form.roomName" />
			<uni-list-item title="合同周期:" :rightText="form.rangeNum" />
			<uni-list-item title="距离到期时间(天):" :rightText="form.cycle?form.cycle:'0'" />
			<view class="list flex">
				<view class="list-left">预计延期到:</view>
				<div class="list-content flex-1">
					<uni-datetime-picker
						type="date" 
						:clear-icon="false" 
						v-model="single"
						:start="range.start"
						@change="change"
						:end="range.end"
					/>
				</div>
			</view>
			<view class="list flex">
				<view class="list-left">延期费用(元):  </view>
				<div class="list-content flex-1 text-right">
					<text class="yellow"> {{((form.cycleVal)*(form.dailyRent*3)).toFixed(2)}}</text>
				</div>
			</view>
		</uni-list>
		<view class="tipsBox flex">
			<view class="tips flex flex-1"><u-icon class="mr-4rpx" color="#F8534B" size="14" name="info-circle"></u-icon>延期最多不能超过7天，延期一天费用为日租金的3倍</view>
		</view>
		<view v-if="!flag" class="btn" @click="confirm">确认</view>
		<view v-else class="cancel-btn">确认</view>
	</view>
</template>
<script setup lang="ts">
import { getContractApply } from '@/common/API/contract'
import { onLoad} from "@dcloudio/uni-app"
import { reactive,ref, watch } from "vue";
import dayjs from "dayjs"

const form = reactive({
	id: null,//id
	contractId: null,//合同id
	applyType: 3,
	startTime:null,
	endTime: null,
	monthRent: null,
	property:null,
	cycle:null,
	roomName: null,
	startCon:null,
	endCon: null,
	rangeNum: null,
	dailyRent: null,
	cycleVal: 1
})
const flag = ref(false)
//时间选择区间
const range = reactive({
	start: null,
	end: null
})
const change = (e) => {
	form.cycleVal = dayjs(timestamp(e)).diff(timestamp(form.endCon), 'day')
}
const single = ref(null)
//处理时间戳
const timestamp = (val : any, s) => {
	return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
//提交
const confirm = async () => {
	let data = {
		contractId: form.contractId,//合同id
		applyType: 3,
		endTime:  timestamp(single.value),
		monthRent: form.dailyRent,
		property:form.property,
		cycle:form.cycleVal
	}
	if(form.id){
		data.id =  form.id
	}
	let res = await getContractApply(data)
	if(res){
		uni.redirectTo({
			url: `/pages/personal/contract/ConExtensionDetail?id=${res.id}`
		})
	}
}
onLoad((options)=>{
	if(options){
		let info = JSON.parse(decodeURIComponent(options.info))
		form.roomName = info.roomName
		form.monthRent = info.monthRent
		form.dailyRent = info.dailyRent
		form.property = info.property
		
		if(options.type == 'edit'){//修改合同申请
			form.id = info.id
			form.contractId = info.contractId
			//延期选择时间区间
			let rangeStart = timestamp(new Date().getTime())//当天时间戳
			let rangeEnd = timestamp((new Date(info.sourceEndTime)).getTime())//合同结束时间戳
			let sevenRangeEnd = timestamp(dayjs(info.sourceEndTime).add(6, 'day')) //合同结束7天后时间
			
			if(rangeStart < rangeEnd){
				range.start = rangeEnd
				range.end = sevenRangeEnd
			}else{
				flag.value = true
			}
			
			//合同周期开始结束时间
			single.value = timestamp(dayjs(info.sourceEndTime).add(1, 'day'))
			form.startCon = info.sourceStartTime
			form.endCon = info.sourceEndTime
			form.rangeNum = form.startCon + '~'+ form.endCon
			//计算天数
			form.cycle = JSON.stringify(dayjs(timestamp(form.endCon)).diff(timestamp(form.startCon), 'day'))
		}else{
			form.contractId = info.id
			//延期选择时间区间
			let rangeStart = timestamp(new Date().getTime())//当天时间戳
			let rangeEnd = timestamp(info.endTime)//合同结束时间
			let sevenRangeEnd = timestamp(dayjs(info.endTime).add(6, 'day')) //合同结束7天后时间
			console.log(rangeStart,rangeEnd)
			//如果合同结束时间 1、大于当前时间[合同结束时间，合同结束时间+7] 2、小于当前时间[当前时间,当前时间+7]
			if(rangeStart < rangeEnd || rangeStart == rangeEnd){
				range.start = rangeEnd
				range.end = sevenRangeEnd
			}else{
				flag.value = true
			}
			//合同周期开始结束时间
			single.value = timestamp(dayjs(info.endTime).add(1, 'day'))
			form.startCon = timestamp(info.startTime)
			form.endCon = timestamp(info.endTime)
			form.rangeNum = form.startCon + '~'+ form.endCon
			//计算天数
			form.cycle = JSON.stringify(dayjs(timestamp(form.endCon)).diff(timestamp(form.rangeStart),'day'))
		}
	}
})
</script>
<style lang="scss" scoped>
.container{
	padding: 32rpx 0;
	::v-deep.uni-list{
		.uni-list-item__content-title{
			font-size: 28rpx;
		}
		.uni-list-item__extra-text{
			font-size: 28rpx;
			color: #4D4D4D;
		}
	}
	.tipsBox{
		padding: 12rpx 32rpx;
		.tips{
			font-size: 24rpx;
			color: #F8534B;
			line-height: 46rpx;
		}
		.status{
			line-height: 46rpx;
		}
	}
	.list{
		padding: 20rpx 32rpx;
		border-top: 2rpx solid #f3f3f3;
		::v-deep.uni-date{
			text-align: right;
			.uni-date__x-input{
				line-height: 54rpx;
				color: $uni-color-primary;
			}
			.uni-date-x--border{
				border: none;
			}
			.uni-icons{
				display: none;
			}
		}
	}
	.text-right{
		text-align: right;
	}
	.btn{
		position: fixed;
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
		background: $uni-color-primary;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 200rpx;
		text-align: center;
		::v-deep.u-button__text{
			font-size: 32rpx !important;
		}
	}
	.cancel-btn{
		position: fixed;
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
		background: $uni-text-color-disable;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
		border-radius: 200rpx;
		::v-deep.u-button__text{
			font-size: 32rpx !important;
		}
	}
}
</style>
